<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <ScrollContainer>
      <Tabs
        class="h-full"
        v-if="tabListData.length > 1"
        v-model:activeKey="activeKey"
        @change="onTabChange"
        centered
      >
        <TabPane :key="item.key" :tab="item.title" v-for="item in tabListData">
          <component
            :is="item.component"
            :key="item.key"
            :formCode="formCode"
            :moduleCode="moduleCode"
          />
        </TabPane>
      </Tabs>
    </ScrollContainer>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import SetupComponent from './setupComponent/index';
  import ListComponent from './listComponent/index.vue';
  import PhoneComponent from './phoneComponent/index.vue';
  import PageComponent from './pageComponent/index.vue';
  import StyleComponent from './styleComponent/index.vue';
  import SearchComponent from './searchComponent/index.vue';
  import AuthorityComponent from './authorityComponent/index.vue';
  import TabComponent from './tabComponent/index.vue';
  import ImportComponent from './importComponent/index.vue';
  import ExportComponent from './exportComponent/index.vue';
  import RelateComponent from './relateComponent/index.vue';
  export default defineComponent({
    components: {
      SetupComponent,
      TabComponent,
      PageComponent,
      ListComponent,
      PhoneComponent,
      StyleComponent,
      SearchComponent,
      AuthorityComponent,
      ImportComponent,
      ExportComponent,
      RelateComponent,
    },
  });
</script>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { tabList } from './managerPage.data';
  import { PageWrapper } from '/@/components/Page';
  import { ScrollContainer } from '/@/components/Container';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { useRouter } from 'vue-router';
  import { useGo } from '/@/hooks/web/usePage';
  import { getToken } from '/@/utils/auth';

  const { setTitle } = useTabs();
  const { currentRoute, resolve } = useRouter();
  const activeKey = ref('setup');
  const oldActiveKey = ref('setup');
  const formCode = ref('');
  const moduleCode = ref('');
  const tabListData = ref<Recordable[]>([]);
  const fetch = () => {
    let showTab = currentRoute.value?.query?.showTab;
    if (showTab == 'authority') activeKey.value = 'authority';

    formCode.value = currentRoute.value?.query?.formCode as any;
    moduleCode.value = currentRoute.value?.query?.moduleCode as any;
    if (currentRoute.value?.query?.title) {
      setTitle(`模块-${currentRoute.value.query.title}`);
    }
    if (formCode.value != moduleCode.value) {
      tabListData.value = tabList.filter((item) => item.key !== 'relate');
    } else {
      tabListData.value = tabList;
    }
  };
  onMounted(fetch);

  const go = useGo();

  const onTabChange = (key) => {
    if (key === 'form') {
      activeKey.value = oldActiveKey.value;

      // const params = {
      //   record: {
      //     code: moduleCode.value,
      //   },
      //   isUpdate: true,
      // };
      // go({
      //   path: '/formManagementEdit',
      //   query: {
      //     info: JSON.stringify(params),
      //     title: `模块-${currentRoute.value.query.title}编辑`,
      //     cacheName: `formManagementEdit${moduleCode.value}`,
      //   },
      // });

      let routeUrl: any = {};
      routeUrl = resolve({
        path: '/formEditor',
        query: {
          formCode: formCode.value,
          pageName: currentRoute.value.meta.title,
          // name: formRowData.value.cwsWorkflowTitle,
          token: getToken() as any,
        },
      });
      const height = screen.height;
      const width = screen.width;
      window.open(
        routeUrl.href,
        '',
        `height=${height},width=${width},top=0, left=0,alwaysRaised=true,toolbar=no,location=no,resizable=no, scrollbars=yes ,`,
      );
    } else {
      oldActiveKey.value = key;
    }
  };
</script>
<style lang="less" scoped>
  .ant-tabs {
    margin: 10px;
  }
  :deep(.ant-tabs-nav) {
    background-color: #fff;
    margin-bottom: 10px;
  }
</style>
